<template>
  <section v-permission="permission">

    <ym-shape-title class="m-margin-top20"
                    shape-size="10px"
                    text="操作记录" />
    <div class="m-card-view">
      <el-row>
        <el-col :span="24">
          <ym-table :options="options"
                    :data="dataLogs"
                    :total='data.length'
                    :currentPage="currentPage"
                    :perPage="size"
                    @load="loadLogs"
                    size="mini"></ym-table>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="logDialogShow"
               title="日志详情">
      <el-form label-width="130px"
               style="max-height:60vh;overflow:auto">
        <el-form-item label="id：">{{selectLog.id}}</el-form-item>
        <el-form-item label="操作者：">{{selectLog.operatorName}}({{selectLog.operatorCode}})</el-form-item>
        <el-form-item label="本地角色："
                      v-if="selectLog.roleCode">{{selectLog.roleName}}（{{selectLog.roleCode}}）</el-form-item>
        <el-form-item label="事件：">{{selectLog.eventTitle}}</el-form-item>
        <el-form-item label="路由：">{{selectLog.api}}</el-form-item>
        <el-form-item label="post参数：">{{selectLog.message}}</el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small"
                   @click="logDialogShow=false"> 关闭</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>

import { cloneDeep } from 'lodash'
import dayjs from 'dayjs'
export default {
  name: 'ym-logs-list',
  props: {
    data: {
      type: Array,
      default: []
    },
    permission: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      options: {
        config: [
          {
            label: '时间',
            width: '180',
            render: (h, params) => {
              return (
                <span>{dayjs.unix(params.row.createTime).format('YYYY-MM-DD HH:mm')}</span>
              )
            }
          },
          {
            prop: 'operatorName',
            label: '操作人',
            width: '180',
          },
          {
            prop: 'roleName',
            label: '角色',
            width: '180',
          },
          {
            prop: 'eventTitle',
            label: '动作',
            width: '300',
          },

          {
            label: '操作',
            render: (h, params) => {
              return h('div', [
                h('el-button', {
                  props: {
                    type: "text",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.selectLog = params.row
                      this.logDialogShow = true
                    }
                  }
                }, '查看日志')
              ])
            }
          },
        ]
      },
      dataLogs: [],
      currentPage: 1,
      size: 5,
      logDialogShow: false,
      selectLog: {}
    }
  },
  mounted () {
    this.loadLogs()
  },
  methods: {
    loadLogs (page, size) {
      this.currentPage = page || this.currentPage
      this.size = size || this.size
      let list = cloneDeep(this.data)
      this.dataLogs = list.splice((this.currentPage - 1) * this.size, this.size)
    }
  }
}
</script>
